<template>
  <el-row class="container">
    <el-col :span="15">
      <el-row>
        <el-col :span="5">
          <h2>分类设置</h2>
        </el-col>
        <el-col :span="10">
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="" prop="name">
              <el-input v-model="form.name" placeholder="分类名称" clearable size="mini"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit" size="mini">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-table
        border
        :data="listData.items">
        <el-table-column
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="handleEdit(scope.row.id,scope.row.name)" v-if="edittingId !== scope.row.id">编辑
            </el-button>
            <el-button
              size="mini"
              @click="cancelEdit()" v-if="edittingId === scope.row.id">取消
            </el-button>
            <el-button
              size="mini"
              type="success"
              @click="submitEdit(scope.row.id)" v-if="edittingId === scope.row.id">保存
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="deleteItem(scope.row.id)" >删除
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="ID"
          align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="分类名称"
          align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.id !== edittingId">{{scope.row.name}}</div>
            <el-form :model="{name}" ref="class_name" v-else>
              <el-form-item label="" prop="name" :rules="rules">
                <el-input v-model="name" clearable size="mini"></el-input>
              </el-form-item>
            </el-form>
            <!--<el-input v-model="name" clearable size="mini" v-else></el-input>-->
          </template>
        </el-table-column>
        <el-table-column
          prop="createAt"
          label="创建日期"
          align="center">
          <template slot-scope="scope">
            <div>{{scope.row.createAt | format}}</div>
          </template>
        </el-table-column>
      </el-table>
      <app-pagination
        :currentPage.sync="listData.page"
        :size.sync="listData.size"
        :total="listData.total"
        @handleCurrentChange="initData()"
        @handleSizeChange="initData()"
      ></app-pagination>
      <div class="add_btn_box">
        <el-button @click="addDialog = true" type="primary" size="mini">新增</el-button>
      </div>
    </el-col>
    <app-category-dialog :show.sync="addDialog" @success="initData()"></app-category-dialog>
  </el-row>
</template>
<script>
  import ApiClient from '@/utils/ApiClient'
  import AppPagination from '@/components/AppPagination'
  import AddCategoryDialog from './AddCategoryDialog'
  import ValidataRules from '@/utils/validateRules'

  export default {
    components: {
      'app-pagination': AppPagination,
      'app-category-dialog': AddCategoryDialog,
    },
    data() {
      return {
        listData: {
          page: 1,
          size: 10,
          items: null,
          total: null,
          totalPage: null,
          name: '',
        },
        form: {
          name: '',
        },
        rules:[
          {type:'string',required: true, message: '不能为空', trigger: 'blur'},
          { validator:ValidataRules.limitMaxLength(50), trigger: 'blur' },
        ],
        addDialog: false,
        //编辑条目id
        edittingId:null,
        name:''
      }
    },
    methods: {
      initData() {
        ApiClient.get('/backend/exhibitType/list.do', {
          page: this.listData.page,
          size: this.listData.size,
          name: this.form.name
        }).then(data => {
          this.listData = data
        })
      },
      deleteItem(id) {
        ApiClient.put(`/backend/exhibitType/${id}/delete.do`).then(data => {
          this.initData()
        }).catch()
      },
      onSubmit() {
        this.listData.page = 1;
        this.listData.size = 10;
        this.initData()
      },
      //选择编辑条目
      handleEdit(id,name) {
        this.edittingId = id;
        this.name = name;
      },
      cancelEdit(){
        this.edittingId = null;
        this.name = '';
      },
      //提交编辑
      submitEdit(id){
        this.$refs['class_name'].validate((valid) => {
          if(valid){
            ApiClient.put(`/backend/exhibitType/update.do`,{id:id,name:this.name}).then(data =>{
              this.initData();
              this.edittingId=null;
            }).catch()
          }
        });
      }
    },
    mounted() {
      this.initData()
    }
  }
</script>
<style scoped lang="scss">
  .container {
    .add_btn_box {
      margin-top: 20px;
      .el-button {
      }
    }
  }
</style>
